import React, { useState, useMemo, useContext } from 'react'
import { Popover, Checkbox, Radio, Space, Typography } from 'antd'
import { getMessage, TextWidget } from '@inbiz/react';
import CategoryRender from './CategoryRender'
import SecondImg from '../../SecondImg'
import { ThemeContext } from '../../context';

import './index.less'
export default function MultiplePanel(props) {
  const { SectionGroupData, parentItem, config, selected, onSelected, form, level, isCustom, setCutomValue, fiterCustom } = props
  const [selectradioValue, $selectradioValue] = useState({})
  const { getChecked, handlechange } = useContext(ThemeContext);
  const groupData = useMemo(() => {
    const newSectionGroupData = SectionGroupData.map(item => {
      if (item.Count === undefined && item?.sectionItemList?.length) {
        item.Count = item?.sectionItemList.reduce((pre, next) => {
          return pre + next.Count
        }, 0);
      }
      return item;
    });
    return newSectionGroupData
  }, [SectionGroupData])
  const indeterminate = (item) => {
    const itemKeys = item.sectionItemList.map((ele) => ele.Key);
    const selectAll = selected.filter((ele) => itemKeys.includes(ele));
    const itemselectAll = itemKeys.every((ele) => selected.includes(ele));
    if (itemKeys.length == selectAll.length || selectAll.length == 0 || itemselectAll) {
      return false;
    }
    return true;
  };
  const radioValue = useMemo(() => {
    if (isCustom.length > 0 && fiterCustom(parentItem.Value)) {
      return parentItem.Value
    }
    if (selected.length == 0) {
      return ''
    }
    if ((selected.length > 0 || !parentItem.IsWhether) && selectradioValue) {
      const value = form.getFieldValue();
      if (value?.[parentItem.Key]) {
        return ''
      }
      const haveValue = selectradioValue?.sectionItemList?.some(item => selected.some(ele => ele == item.Key))
      return haveValue ? selectradioValue.Value : ''
    }
    return ''
  }, [selected, selectradioValue, isCustom])

  return (

    <div className='showCategory' >
      {
        parentItem.IsWhether ? groupData.map((item, i) => {
          return <Popover
            // visible={true}
            key={i}
            overlayClassName="customTopPopover"
            placement='bottomLeft'
            content={
              parentItem.ShowHierarchy == 3 && <CategoryRender
                item={item}
                parentItem={parentItem}
                level={level}
                IsWhether={parentItem?.IsWhether}
                config={config}
                selected={selected}
                onSelected={onSelected}
                form={form}
                setCutomValue={setCutomValue}
              />
            }
          >
            <Checkbox
              indeterminate={indeterminate(item)}
              checked={getChecked(item) as unknown as boolean}
              onChange={(e) => {
                form.resetFields()
                handlechange(e, item.sectionItemList, level, true)
              }}
              value={item.Value}>
              <SecondImg Icon={item.Icon} />
              {item.Value}
            </Checkbox><br />
          </Popover>
        })
          : <Radio.Group value={radioValue}>
            <Space direction="vertical" size={0}>
              {groupData.map((item, i) => {
                return <Popover
                  // visible={true}
                  key={i}
                  overlayClassName='customRightRadio'
                  placement='bottomLeft'
                  content={parentItem.ShowHierarchy == 3 && <CategoryRender
                    item={item}
                    parentItem={parentItem}
                    level={level}
                    IsWhether={parentItem?.IsWhether}
                    config={config}
                    selected={selected}
                    onSelected={onSelected}
                    form={form}
                    $selectradioValue={$selectradioValue}
                    setCutomValue={setCutomValue}
                  />}
                >
                  <Radio
                    value={item.Value}
                    onChange={(e) => {
                      setCutomValue(parentItem, level, '1')
                      if (item.ShowHierarchy == 2) {
                        handlechange(e, item.sectionItemList, level, false)
                      } else {
                        handlechange(e, item.sectionItemList.slice(0, 1), level, false)
                      }
                      form.resetFields()
                      $selectradioValue(item)
                    }
                    }>
                    <SecondImg Icon={item.Icon} />
                    <Typography.Text title={item.Value}>{item.Value}</Typography.Text>
                  </Radio>
                </Popover>
              })}
            </Space>
            {parentItem.IsCustomSearch &&
              <div>
                <Radio value={parentItem.Value} onChange={(e) => {
                  setCutomValue(parentItem, level)
                }}>
                  <Typography.Text title={getMessage('SearchResultEngine.custom')} ellipsis>
                    <TextWidget>SearchResultEngine.custom</TextWidget>
                  </Typography.Text>
                </Radio>
              </div>
            }
          </Radio.Group >}
    </div>
  )
}
